<template>
    <div v-if="isUrl" :style="urlIconStyle" class="url-svg svg-icon icon" />
    <svg v-else class="svg-icon icon" :style="iconStyle">
        <use :href="iconName" />
    </svg>
</template>
<script  lang="ts" setup>
import { computed, CSSProperties } from 'vue'
import { isExternal } from "@/utils/common"
interface Props {
    name: string
    size: string
    color: string
}

const props = withDefaults(defineProps<Props>(), {
    name: '',
    size: '18px',
    color: '#000000',
})

const s = `${props.size.replace('px', '')}px`
const iconName = computed(() => `#${props.name}`)
/**
 * 返回样式 color与font-size
 */
const iconStyle = computed((): CSSProperties => {
    return {
        color: props.color,
        fontSize: s,
    }
})
//判断是否是外部链接 返回的是布尔值
const isUrl = computed(() => isExternal(props.name))
const urlIconStyle = computed(() => {
    return {
        width: s,
        height: s,
        mask: `url(${props.name}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${props.name}) no-repeat 50% 50%`,
    }
})

</script>
<style lang="scss" scoped>

</style>